<template>
  <view class="container">
    <u-popup @touchmove.stop.prevent="moveHandle" :show="show" :round="20" mode="bottom" @close="closeShow()" :closeable="true"
             closeOnClickOverlay>
      <view class="warp">
        <view>
          <view class="title">顾客购买设置</view>
          <view class="u-p-r-20 u-p-l-20">
            <view class="u-flex u-row-between u-m-b-35">
              <view class="text">商品分类开关</view>
              <u-switch v-model="params.commodityGroupSwitch"  size="22"></u-switch>
            </view>
            <view class="u-flex u-row-between">
              <view class="text">购物模式</view>
              <u-switch v-model="params.shoppingCart" size="22"></u-switch>
            </view>
            <view v-if="params.shoppingCart" class="u-flex-center text u-m-l-30 u-m-r-30 u-m-t-10">
              <view class="u-m-r-20">购物车容量，最大存放 </view>
              <u--input v-model="params.shoppingCartCapacity" @input="integerTest($event)"
                        inputAlign="center" type="number" :customStyle="inputStytle"
                        maxlength="6"></u--input>
              <view class="u-m-l-15">个商品</view>
            </view>
            <view class="u-flex u-row-between u-m-t-40">
              <view class="text" style="letter-spacing: 0rpx;">
                <text class="u-m-r-13">商品展示</text>
              </view>
            </view>
            <u-radio-group placement="column" v-model="params.productDisplayType"  @change="radioContentChange($event)">
              <u-radio activeColor="#6072FF" :customStyle="{margin: '30rpx'}" labelSize="28rpx" shape="circle" :name="1" label="按货道顺序展示商品（同类商品不合并）"></u-radio>
              <u-radio activeColor="#6072FF" :customStyle="{margin: '30rpx'}" labelSize="28rpx" shape="circle" :name="2" label="按商品排序展示（同类商品合并）"></u-radio>
            </u-radio-group>
          </view>
        </view>
        <view class="u-m-t-50">
          <view class="title">其他设置</view>
          <view class="u-p-r-20 u-p-l-20">
            <view class="u-flex u-row-between u-m-b-35">
              <view class="text">出货失败重试</view>
              <u-switch v-model="params.retry" size="22"></u-switch>
            </view>
            <view class="u-flex u-row-between">
              <view class="text">自动退款</view>
              <u-switch v-model="params.autoRefund" size="22"></u-switch>
            </view>
            <view class="u-flex u-row-between u-m-t-40" v-if="device.deviceTypeId == $deviceTypeEnum.OPEN_DOOR_VENDING_MACHINE && device.isBluetooth">
              <view class="text">电池数量</view>
              <u-number-box v-model="params.batteryNumber" integer :min="3" :max="4"></u-number-box>
            </view>
          </view>
        </view>
        <view class="u-flex u-row-around btn">
          <u-button text="取消" :customStyle="cancelCustomStyle" @click="cancel()"></u-button>
          <u-button text="保存" :customStyle="saveCustomStyle" @click="save()"></u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    dId: {

    }
  },
  data() {
    return {
      show: false,
      $deviceTypeEnum: this.$deviceTypeEnum,
      params:{
        id:'',
        deviceNo:'',
        commodityGroupSwitch:false,
        retry:false,
        shoppingCart:false,
        productDisplayType:'',
        shoppingCartCapacity:'',
        autoRefund:false,
        batteryNumber:4,
        // deviceTypeId:'',

      },
      cancelCustomStyle: {
        width: '232rpx',
        height: '88rpx',
        background: 'rgb(255, 255, 255)',
        borderRadius: '120px',
        color: 'rgba(0, 0, 0, 0.6)',
      },
      device:{},
      inputStytle:{
        padding:'4rpx'
      },
      saveCustomStyle: {
        width: '232rpx',
        height: '88rpx',
        background: 'rgb(69, 111, 255)',
        borderRadius: '120px',
        color: '#fff',
      },
    }
  },

  methods: {
    moveHandle() {

    },
    save(){
      if ((this.params.shoppingCart && this.$u.test.isEmpty(this.params.shoppingCartCapacity)) ||
          (this.params.shoppingCart && this.params.shoppingCartCapacity <= 0)) {
        this.$helpers.toast('购物车开启后，购物车容量不能为空并且要大于0');
        return;
      }
      if(this.device.deviceTypeId == this.$deviceTypeEnum.OPEN_DOOR_VENDING_MACHINE && this.device.isBluetooth){
        if (this.$u.test.isEmpty(this.params.batteryNumber)) {
          this.$helpers.toast('电池量不能为空并且要大于0');
          return;
        }
      }
      uni.showLoading({
        title: '保存中...',
        mask: true
      })

      this.$api('device.updateCustomerBuySet', this.params)
          .then(res => {
            uni.hideLoading();
            if (res.status == 0) {
              this.show = false;
              this.$helpers.toast('修改成功');
              // this.$helpers.toast('修改成功', 'success', 3000, true, () => {
              // 	this.findOneDeviceById("", false);
              // });
            } else {
              getApp().err('保存失败', res.msg);
            }
          })
          .catch(() => {
            uni.hideLoading();
          });
    },
    radioContentChange(e){
      this.params.productDisplayType = e
    },
    // radioDeviceTypeIdChange(e){
    //   this.params.deviceTypeId = e
    // },
    cancel(){
      this.show = false
    },
    //整数 检验
    integerTest(e) {
      //正则表达试
      e = (e.match(/^(?!0\d)\d+$/.exec(e))) || '';
      //重新赋值给input
      this.$nextTick(() => {
        this.params.shoppingCartCapacity = e == '' ? e : e[0]
      })
      if (e == '') {
        this.$helpers.toast('输入有误，请输入正整数');
      }else if(e[0]>20){
        e[0]=20
        this.$helpers.toast('数量不能超过20个商品');
      }
    },
    init(device) {
      //数据回响
      this.device = device
      this.params.id = device.id
      this.params.deviceNo = device.deviceNo
      this.params.commodityGroupSwitch = device.commodityGroupSwitch
      this.params.retry = device.retry
      this.params.autoRefund = device.autoRefund
      this.params.shoppingCart = device.shoppingCart
      this.params.shoppingCartCapacity = device.shoppingCartCapacity
      this.params.productDisplayType = device.productDisplayType
      this.params.batteryNumber = device.batteryNumber
      // this.params.deviceTypeId = device.deviceTypeId

      console.log(this.device,'device')
      this.show = true;
    },
    closeShow() {
      this.show = false;
    },

  },
}
</script>

<style lang="scss" scoped>
.container{
  .warp{
    padding: 30rpx;
    .title{
      color: rgb(0, 0, 0);
      font-size: 32rpx;
      margin-bottom: 40rpx;
    }
    .text{
      color: rgba(0, 0, 0, 0.8);
      font-size: 28rpx;
      letter-spacing:1rpx;
    }
    .btn{
      margin-top: 40rpx;
    }

  }

}
</style>
